<template>
	<view class="zh-article-dynamic-detail">
		<view class="top display-flex">
			<view class="font-36 font-302D2D font-bold">
				<text class="to-top" v-if="articleData.detail.isTopping == '1'">置顶</text>
				<text class="title">{{ articleData.detail.noticeTitle }}</text>
			</view>
		</view>
		<view class="bottom display-flex justify-between align-center">
			<view class="display-flex align-center">
				<image src="@/static/icons/avatar_icon.png" class="avatar-icon"/>
				<text class="ml-10 font-24 font-666">{{ articleData.detail.author }}</text>
			</view>
			<view class="display-flex align-center">
				<text class="font-24 font-BAB9B9">{{ articleData.detail.createTime }}</text>
				//#ifdef APP-PLUS
				<image src="@/static/icons/share_icon.png" class="share-icon" @click="handleShare"/>
				//#endif
				//#ifdef MP-WEIXIN
				<button open-type="share" class="share-btn">
					<image src="@/static/icons/share_icon.png"  @click="handleShare" class="share-image"/>
				</button>
				//#endif
			</view>
			
		</view>
		<view class="content">
			<u-rich-text :html="articleData.detail.noticeContent"></u-rich-text>
		</view>
		<!-- <share :show="shareData.show" @close="changeShare" :articleData="shareData.data"></share> -->
	</view>
	
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import {onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { article } from '@/api'
	import { util, tip } from '@/utils'
	import type { ArticleDetailData } from '@/@type/article'
	
	const domain = import.meta.env.VITE_APP_DOMAIN
	const shareData:any = reactive({
		show:false,
		data:{
			title:'',
			summary:'',
			imageUrl:'',
			href:'',
		}
	})
	const articleData: ArticleDetailData = reactive({
		query:{
			noticeId:""
		},
		detail:{
			author:"",
			createTime:""
		}
	})
	
	onLoad((option:any) => {
		articleData.query = option
		goodsDetail()
	})
	
	
	onShow(() => {
		// wx.updateShareMenu({
		//   withShareTicket: true,
		//   menus: ['shareAppMessage', 'shareTimeline'],
		//   success () { }
		// })
		
	})
	//#ifdef MP-WEIXIN
	onShareAppMessage((res:any) => {
		if (res.from === 'button') {
			// 来自页面内分享按
			return {
				title: shareData.data.title,
				path: shareData.data.href,
				imageUrl: shareData.data.imageUrl,
				success: (res:any) => {
					// 转发成功
					tip.showToast('分享成功！')
				},
				fail: (err:any) => {
					// 转发失败
					tip.showToast('分享失败！')
				}
			}
		} else {
			return {
				title: shareData.data.title,
				path: shareData.data.href,
				imageUrl: shareData.data.imageUrl,
				success: (res:any) => {
					tip.showToast('分享成功！')
				},
				fail: (err:any) => {
					tip.showToast('分享失败！')
				}
			}
		}
	})
	
	onShareTimeline(() => {
		return {
		    title: shareData.data.title,
		    imageUrl: shareData.data.imageUrl
		}
	})
	//#endif
	
	const goodsDetail = () => {
		article.getNoticeDetail(articleData.query).then((res:any) => {
			const data = res.data
			data.createTime = data.createTime?util.getDate(data.createTime):""
			articleData.detail = data
			let imageUrl:any = util.previewImg(data.titleImg)
			//#ifdef MP-WEIXIN
			shareData.data = {
				title:data.noticeTitle,
				summary:data.remark,
				imageUrl:imageUrl,
				href:'/pages/article/dynamic/detail?noticeId=' + articleData.query.noticeId,
			}
			//#endif
			//#ifdef APP-PLUS 
			compressImg(imageUrl).then((res:any) => {
				shareData.data = {
					title:data.noticeTitle,
					summary:data.remark,
					imageUrl:res,
					href:'/pages/article/dynamic/detail?noticeId=' + articleData.query.noticeId,
				}
			})
			//#endif
		})
	}
	
	// const previewImg = (url:string) => {
	// 	return util.previewImg(url)
	// }
	
	const handleShare = () => {
		//#ifdef APP-PLUS
		share()
		//#endif
	}
	
	const compressImg = (img:string) => {
		return new Promise((resolve, reject) => {
			uni.getImageInfo({
				src:img,
				success:(res:any) => {
					const resPath = res.path
					uni.getFileInfo({
						filePath: resPath,
						success: (res1:any) => {
							if(res1.size < 20 * 1024) {
								resolve(img)
							} else if (res1.size > 20 * 1024 && res1.size < 40 * 1024) {
								uni.compressImage({
									src:resPath,
									quality:50,
									success:(res2) => {
										resolve(res2.tempFilePath)
									}
								})
							} else if(res1.size >= 40 * 1024 && res1.size < 1024 * 1024){
								uni.compressImage({
									src:resPath,
									quality:10,
									success:(res2) => {
										resolve(res2.tempFilePath)
									}
								})
							} else if(res1.size >= 1024 * 1024){
								uni.compressImage({
									src:resPath,
									quality:2,
									success:(res2) => {
										resolve(res2.tempFilePath)
									}
								})
							}
						},
						fail: (err:any)  =>{
							reject(err)
						}
					})	
				},
				fail:(err:any) => {
					reject(err)
				}
			})
		})
		
	}
	
	
	const share = () => {
		const type = import.meta.env.VITE_APP_SHARE_ENV_TYPE
		console.log(type)
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 5,
			title: shareData.data.title,
			imageUrl:shareData.data.imageUrl,
			miniProgram:{
				id:'gh_ba274cace17e',
				path:shareData.data.href,
				type:type,
				webUrl:domain + shareData.data.href
			},
			success: function (res) {
				console.log("success:" + JSON.stringify(res));
				tip.showToast('分享成功')
			},
			fail: function (err) {
				console.log("fail:" + JSON.stringify(err));
			}
		})
	}
	
	const changeShare = () => {
		shareData.show = !shareData.show
	}
</script>

<style lang="scss" scoped>
	.zh-article-dynamic-detail {
		background-color: $uni-bg-card-color;
		padding:40rpx 30rpx;
		.top {
			.to-top {
				text-align:center;
				display:inline-block;
				width: 57rpx;
				height: 30rpx;
				//#ifdef APP-PLUS
				line-height: 32rpx;
				box-sizing:border-box;
				//#endif
				//#ifdef MP-WEIXIN || H5
				line-height: 30rpx;
				//#endif
				box-sizing:border-box;
				border: 1rpx solid #EC1010;
				border-radius: 6rpx;
				color:#EC1010;
				font-size: 20rpx;
				vertical-align: middle;
			}
			.title {
				vertical-align: middle;
				margin-left:15rpx;
				line-height:45rpx;
			}
		}
		.bottom {
			margin-top: 30rpx;
			.avatar-icon {
				width:24rpx;
				height: 24rpx;
			}
			.share-icon {
				width: 35rpx;
				height:34rpx;
				margin-left:20rpx;
			}
			.share-btn {
				width:35rpx;
				height:35rpx;
				padding:0;
				line-height:0;
				font-size:0;
				background-color: #fff;
				border-radius: 0;
				margin-left:20rpx;
				image {
					width:35rpx;
					height:35rpx;
				}
			}
		}
		.content {
			margin-top: 60rpx;
		}
	}
</style>
